<template>
	<view class="conn">
		<view class="navie">
			<view style="display: flex;align-items: center;justify-content: flex-start;" @click="show=true">
				<view>{{parm.year}} 年</view>
				<u-icon name="arrow-down-fill" ></u-icon>
			</view>
		</view>
		<u-picker :show="show" @cancel="show=false" :columns="years" @confirm="confirm()"></u-picker>
		<view class="top">
			<view style="text-align: center;color:#353535;font-size: 14px;padding-top: 35rpx;">年结余</view>
			<u--text mode="price" :text="(yearNum-yearJian)" bold="true" size="23" align="center"></u--text>
			<view style="display: flex;align-items: center;justify-content: center;margin-top: 30rpx;">
				<view style="display: flex;align-items: center;justify-content: flex-start;">
					<view style="color:#353535;font-size: 14px;">年收入：</view>
					<u--text mode="price" :text="yearNum" bold="true" size="15"></u--text>
				</view>
				<view style="display: flex;align-items: center;justify-content: flex-start;margin-left: 30rpx;">
					<view style="color:#353535;font-size: 14px;">年支出：</view>
					<u--text mode="price" :text="yearJian" bold="true" size="15"></u--text>
				</view>
			</view>
		</view>
		<view class="content">
			<view style="display: flex;align-items: center;">
				<view style="width: 10%;text-align: center;">月份</view>
				<view style="width: 29%;text-align: center;">支出</view>
				<view style="width: 29%;text-align: center;">收入</view>
				<view style="width: 29%;text-align: center;">月结余</view>
			</view>
			<u-line></u-line>
			<view v-for="item in tableData" :key="item.type">
				<view style="display: flex;align-items: center;margin-top: 25rpx;margin-bottom: 30rpx;">
					<view style="width: 10%;text-align: center;">{{item.createdate}}</view>
					<view style="width: 29%;text-align: center;">
						<u--text mode="price" :text="item.jian" size="13" align="center"></u--text>
					</view>
					<view style="width: 29%;text-align: center;">
						<u--text mode="price" :text="item.num" size="13" align="center"></u--text>
					</view>
					<view style="width: 29%;text-align: center;">
						<u--text mode="price" :text="(item.num-item.jian)" size="13" align="center"></u--text>
					</view>
				</view>
				<u-line></u-line>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				parm: {
					pageSize: 12,
					pageNum: 1,
					year: 0,
					userId: uni.getStorageSync("user").id,
				},
				yearNum:'',
				yearJian:'',
				total:'',
				tableData: [],
				years:[]
			}
		},
		onLoad(option) {
			this.parm.year = option.year
			this.getList()
		},
		methods: {
			async getList() {
				const res = await this.$myRuquest({
					url: '/wexinLogin/account/yearAcount',
					method: 'post',
					data: this.parm
				})
				this.tableData=res.data.data.year
				this.yearJian=res.data.data.jian
				this.yearNum=res.data.data.num
				this.years[0]=res.data.data.years
				uni.hideLoading();
			},
			confirm(e) {
				this.parm.year = parseInt(e.value)
				this.getList()
				this.show = false
			},
		}
	}
</script>
<style scoped lang="scss">
	.conn {
		.navie {
			margin-top: 110rpx;
			margin-left: 20rpx;
		}

		.top {
			margin-top: 28rpx;
			height: 270rpx;
			margin-left: 30rpx;
			margin-right: 30rpx;
			background-color: #ffc122;
			border-radius: 15px;
		}

		.content {
			margin-top: 30rpx;
			margin-left: 20rpx;
			margin-right: 20rpx;
		}
	}
</style>
